<template>
  <pro-table
    ref="protable"
    rowKey="patientId"
    :loadDataUrl="api.getList"
    :columns="columns"
    :isAdd="false"
    :isDelete="false"
    :orgId="globalOrgId"
    :isRowSelection="false"
    :extendParam="{
      orgId: globalOrgId,
    }"
    :scrollx="1800"
    @selectedRowChange="onSelectChange"
    @showDeleteConfirm="showDeleteConfirm"
    @changeSelect="changeSelect"
    @handlerReset="handlerReset"
    :isDefinedFilter="true"
  >
    <template slot="illnessGradeNames" slot-scope="{ text, record }">
      <template v-if="record.illnessGradeNames">
        <a-tag :color="filterLevel(item)" v-for="(item, index) in record.illnessGradeNames.filter((item) => item)" :key="index">{{ item }}</a-tag>
      </template>
      <span v-else></span>
    </template>
    <span slot="operation" slot-scope="{ text, record }" class="operation">
      <a href="javascript:;" v-has="'sys:measure:record'" title="随访记录" class="edit" @click="details(record)">随访记录</a>
      <!-- <a href="javascript:;" v-has="'sys:measure:record'" title="编辑" class="edit" @click="editRecord(record)">编辑</a> -->
      <a href="javascript:;" v-has="'sys:measure:delete'" title="删除" class="del" @click="showDeleteConfirm(1, record.patientId, record.realName)">删除</a>
    </span>
    <!-- 导入账户 -->
    <hisRecord ref="hisRecord"></hisRecord>
    <addOrEditAccountModal ref="addOrEditModal" :api="api" modalTitle="患者" @ok="handlerRefresh"></addOrEditAccountModal>
  </pro-table>
</template>

<script>
import { filterOption, filterName } from "@/utils/base.js";
import { rowSelection, recordOperation } from "@/mixins";
import { patientManageapi, sysManageapi } from "@/api/index.js";
import addOrEditAccountModal from "./module/addOrEditAccountModal";
import hisRecord from "./module/hisRecord";
const columns = [
  {
    title: "患者姓名",
    dataIndex: "realName",
    key: "realName",
    searchInfo: {
      type: "string",
      defaultValue: ""
    }
  },
  {
    title: "身份证号",
    dataIndex: "identityCard",
    key: "identityCard",
    with: 200
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
    ellipsis: true
  },
  {
    title: "随访医生",
    dataIndex: "doctorName",
    key: "doctorName",
    ellipsis: true,
    searchInfo: {
      type: "string",
      defaultValue: ""
    }
  },
  // {
  // 	title: '身高(cm)',
  // 	dataIndex: 'height',
  // 	key: 'height',
  // 	ellipsis: true,
  // },
  {
    title: "病人等级",
    // dataIndex: 'sickerGradeName',
    // key: 'sickerGradeName',
    dataIndex: "illnessGradeNames",
    key: "illnessGradeNames",
    scopedSlots: {
      customRender: "illnessGradeNames"
    },
    // ellipsis: true,
    width: 120
  },
  {
    title: "联系方式",
    dataIndex: "phone",
    key: "phone",
    ellipsis: true,
    searchInfo: {
      type: "string",
      defaultValue: ""
    }
  },
  {
    title: "所属医院",
    dataIndex: "deptName", // data数据源中对应的字段
    key: "deptName", // 列的关键字 如果有 dataIndex 则不需要key
    ellipsis: true,
    searchInfo: {
      type: "treeSelect",
      value: "deptId",
      text: "所属医院",
      defaultValue: undefined,
      optionlist: [],
      isLinkage: true // 是否联动筛选
    }
  },
  {
    title: "最后测量时间",
    dataIndex: "lastMeasureTime",
    key: "lastMeasureTime",
    ellipsis: true
  },
  {
    title: "最后同步时间",
    dataIndex: "lastSyncDate",
    key: "lastSyncDate",
    ellipsis: true
  },
  {
    title: "最后同步结果",
    dataIndex: "lastSyncResult",
    key: "lastSyncResult",
    ellipsis: true
  },
  {
    title: "操作",
    key: "operation",
    scopedSlots: {
      customRender: "operation"
    },
    width: 140,
    fixed: "right"
  }
];
export default {
  name: "Accountlist",
  mixins: [rowSelection, recordOperation],
  components: {
    addOrEditAccountModal,
    hisRecord
  },
  data () {
    return {
      filterOption,
      columns,
      api: patientManageapi.patientUrl,
      tablelist: [],
      form: this.$form.createForm(this),
      replaceFields: { children: "children", title: "deptName", key: "deptId", value: "deptId" },
      filter: {
        userName: "",
        nickName: ""
      },
      deptList: [],
      gradeList: [],
      classList: [],
      oldClassList: []
    };
  },
  computed: {},
  watch: {
    globalOrgId: {
      handler (newval, oldval) {
        // if (newval && newval != oldval) {
        if (this.isAdmin) {
          // this.getDeptTree();
        }
        this.filter.userName = undefined;
        this.filter.nickName = undefined;
        this.$nextTick(() => {
          this.onSearch();
        });
        // }
      },
      immediate: true, // 刷新加载 立马触发一次handler
      deep: true
    }
  },
  created () {
    this.columns = columns.filter((item) => {
      if (!(!this.isAdmin && item.key == "deptName")) {
        return item;
      }
    });
  },
  methods: {
    // 获取部门
    getDeptTree () {
      this.$postAction(sysManageapi.deptUrl.getDeptList, {
        orgId: this.globalOrgId || ""
      })
        .then((res) => {
          if (res && res.code == 1) {
            this.deptList = [...res.data];
          }
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },

    setTableData (list) {
      this.tablelist = [...list];
    },

    changeSelect (e, value, item) {
      this.$nextTick(() => {
        // 如果需要联动筛选isLinkage，
        if (item && item.isLinkage) {
          // 公用混合方法：获取筛选条件选中或输入的值
          this.getFilterDefaultValue();
        }
        if (value == "orgId") {
          this.orgId = e;
        } else if (value == "deptId") {
          if (e) {
            this.getGradeList(e);
          } else {
            console.log("部门很高有" + JSON.stringify(e));
            let newcolumns = [...this.columns];
            newcolumns = this.setColumnsSearchInfo(newcolumns, "deptId", undefined, "defaultValue");
            this.columns = [...newcolumns];
          }
        }
      });
    },

    // 切换校区
    changeDept (value) {
      console.log(JSON.stringify(value));
      this.filter.deptId = value;
    },

    /* 筛选拦截，如果不需要特殊处理筛选条件，可以不做设置 */
    handlerSearch (obj) {
      console.log("object" + JSON.stringify(obj));
      this.$refs.protable && this.$refs.protable.loadTable(this.filter);
    },
    /* 刷新列表当前页 */
    handlerRefresh () {
      this.$refs.protable && this.$refs.protable.handlerRefresh();
    },

    onSearch () {
      this.handlerSearch(this.filter);
    },
    onReset () {
      this.filter = {
        nickName: "",
        userName: ""
      };
      this.$nextTick(() => {
        this.$refs.protable.loadTable({});
      });
    },

    /* 筛选条件重置, 将默认设置为undefined/[] */
    handlerReset (obj) {
      console.log("obj" + JSON.stringify(obj));
      let newcolumns = [...this.columns];
      for (var key in obj) {
        console.log(typeof obj[key]);
        if (["string", "number"].includes(typeof obj[key])) {
          newcolumns = this.setColumnsSearchInfo(newcolumns, key, undefined, "defaultValue");
        } else {
          if (Array.isArray(obj[key])) {
            newcolumns = this.setColumnsSearchInfo(newcolumns, key, [], "defaultValue");
          }
        }
      }
      this.columns = [...newcolumns];
      this.orgId = "";
      this.$nextTick(() => {
        this.$refs.protable.loadTable({});
      });
    },
    // editRecord (info) {
    //   this.$refs.addOrEditModal.add(info);
    // },
    details (doctor) {
      this.$refs.hisRecord.show(doctor);
    },
    // 过滤等级
    filterLevel: function (value) {
      if (value.includes("三级")) {
        return "red";
      } else if (value.includes("二级")) {
        return "orange";
      } else if (value.includes("一级")) {
        return "green";
      } else {
        return "";
      }
    }
  }
};
</script>

<style scoped="scoped" lang="less">
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.topbar {
  background: #fff;
  z-index: 6;
  -webkit-box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.05);
  box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.05);
  border-radius: 8px;
  margin: 0;
  margin-bottom: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  .toolbar .refresh {
    width: 40px;
    font-size: 14px;
    margin-right: 10px;
  }
  .toolbar .ant-btn {
    width: 95px;
    font-size: 14px;
    & + .ant-btn {
      margin-left: 10px;
    }
  }

  .toolbar .ant-btn-blue .iconfont,
  .toolbar .ant-btn-green .iconfont,
  .toolbar .ant-btn-yellow .iconfont,
  .toolbar .ant-btn-primary .iconfont {
    font-size: 12px;
    margin-right: 5px !important;
  }
}
::v-deep .ant-tag {
  margin: 4px;
}
</style>
